import React, {PureComponent} from 'react';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';

class OutlinedPie extends PureComponent {
    state = {};
    echartRef = React.createRef();

    componentDidUpdate() {
        if (!!this.echartRef.current) {
            const instance = this.echartRef.current.getEchartsInstance();
            if (instance) {
                instance.setOption(this.getOptions(), true);
            }
        }
    }


    getOptions = (option) => {
        const {title, data, color} = this.props;
        const chartTitle = title || data;
        const defaultProps = {
            title: [
                {
                    text: parseFloat(chartTitle) ? `{a|${Number(chartTitle).toFixed(1)}}{b|%}` : '',
                    x: 'center',
                    top: 'center',
                    textStyle: {
                        rich: {
                            a: {
                                fontSize: 36,
                                color: '#FFFFFF',
                                fontFamily: 'Giorgio Sans',
                                foontWeight: '600',
                            },
                            b: {
                                color: '#FFFFFF',
                                fontSize: 36,
                                foontWeight: '600',
                                fontFamily: 'Giorgio Sans',
                                padding: [-2, 0, 0, 1],
                            },
                        },
                    },
                },
            ],
            backgroundColor: 'transparent',
            polar: {
                radius: ['62%', '75%'],
                center: ['50%', '50%'],
            },
            angleAxis: {
                max: 100,
                show: false,
            },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            series: [
                {
                    name: '',
                    type: 'bar',
                    roundCap: true,
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(255, 255, 255, .17)',
                    },
                    data: data ? (Array.isArray(data) ? data : [data]) : [0],
                    coordinateSystem: 'polar',

                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            {
                                offset: 0,
                                color: color
                                    ? Array.isArray(color)
                                        ? color[0]
                                        : color
                                    : '#32c5ff',
                            },
                            {
                                offset: 1,
                                color: color
                                    ? Array.isArray(color) && color[1]
                                        ? color[1]
                                        : color
                                    : '#0091FF',
                            },
                        ]),
                    },
                },
                {
                    name: '',
                    type: 'pie',
                    startAngle: 80,
                    radius: ['82%'],
                    // hoverAnimation: false,
                    center: ['50%', '50%'],
                    itemStyle: {
                        color: 'rgba(66, 66, 66, .1)',
                        borderWidth: 1,
                        borderColor: 'rgba(255,255,255,0.17)',
                    },
                    data: [100],
                },
            ],
        };
        return {
            ...defaultProps,
            ...option,
        };
    };

    render() {
        const {option = {}} = this.props;
        return (
            <ReactEcharts
                ref={this.echartRef}
                echarts={echarts}
                notMerge={true}
                {...this.props}
                option={this.getOptions(option)}
                lazyUpdate={(this.getOptions(option), false)}
            ></ReactEcharts>
        );
    }
}

export default OutlinedPie;
